<template>
  <div class="example-container">
    <h3>ScheduledTaskButton 使用示例</h3>
    
    <!-- 基本使用 -->
    <div class="example-section">
      <h4>基本使用（自动获取任务）</h4>
      <ScheduledTaskButton 
        @success="handleSuccess"
        @error="handleError"
      />
    </div>
    
    <!-- 指定任务ID -->
    <div class="example-section">
      <h4>指定任务ID</h4>
      <ScheduledTaskButton 
        :task-id="123"
        task-name="指定任务"
        @success="handleSuccess"
        @error="handleError"
      />
    </div>
    
    <!-- 指定任务组和描述 -->
    <div class="example-section">
      <h4>指定任务组和描述</h4>
      <ScheduledTaskButton 
        job-group="5"
        job-desc="处理委案和委案撤案的任务"
        task-name="委案处理任务"
        @success="handleSuccess"
        @error="handleError"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { message } from 'ant-design-vue';
import ScheduledTaskButton from './ScheduledTaskButton.vue';

// 处理成功事件
const handleSuccess = () => {
  console.log('任务执行成功');
  message.success('任务执行成功');
};

// 处理错误事件
const handleError = (error: string) => {
  console.error('任务执行失败:', error);
  message.error('任务执行失败: ' + error);
};
</script>

<style scoped>
.example-container {
  padding: 24px;
}

.example-section {
  margin-bottom: 24px;
  padding: 16px;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
}

.example-section h4 {
  margin: 0 0 16px 0;
  color: #1890ff;
}
</style>
